<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>跨语言大数据</title>
    <link rel="stylesheet" href="../static/assets/css/weui-1.1.2.css">
    <link rel="stylesheet" href="../static/assets/css/jquery-weui-1.2.1.css">
    <link rel="stylesheet" href="../static/assets/css/iconfont.css">
    <link rel="stylesheet" href="../static/css/common.css">
    <link rel="stylesheet" href="../static/css/hotSpot.css">
</head>

<body id="index">
<div class="weui-tab">
    <div class="weui-tab__bd">

        <section class="weui-tab__bd-item weui-tab__bd-item--active" id="details">
            <div class="switch-btn">
                <div class="switch-btn-item original active">原文</div>
                <div class="switch-btn-item translation">译文</div>
            </div>
            <div class="content">
                <div class="mt">
                    <h3 class="title">保加利亚谈一带一路</h3>
                    <dl class="info">
                        <dt>来源：</dt>
                        <dd>新华社</dd>
                        <dt>时间：</dt>
                        <dd>2019-08-12</dd>
                    </dl>
                </div>
                <div class="mc">
                    <p>中国近几年发展的速度非常的快，那么对于能源方面的需求
                    问题，也就日益增上了，是想想迪拜为什么富裕？不是因为迪拜
                    人非常的机智跟聪明，同样也不是因为迪拜的科技非常的先进，
                    而是因为迪拜的土地上有着一片丰富的矿产资源，比如说石油资
                    源就是当下最为稀缺的一种珍贵的资源，然而至今为止，人类还
                    不能准确的找到石油形成的原理，所以就没有办法可再生，以极
                    快速度去创造石油资源！</p>
                    <p>虽说我国的石油资源产量是非常丰富的，但是也奈不过，人
                    类不断地进行开采和利用，那么想要充分的解决这个问题，除了
                    找到一种新型的能源可以代替石油之外，最好办法就是可以重复
                    利用石油资源再生！实际上这两种方法说起来简单，做起来都是
                    非常困难的，所以美国以及我国等多个国家开始将目光放在了宇
                    宙当中，也就是打起了宇宙的主意！</p>
                    <p>地球上的能源稀缺问题，该怎么去解决？那么宇宙当中的星
                    球那么多，不可能只有地球上的一颗星球存在珍贵的资源，于是
                    多个国家才想着可以将其他行星上的能源给利用起来，比如说围
                    绕在太阳附近，就存在着很多小行星，而这些小行星却可以不去
                    高温，说明这颗小行星上肯定存在着一些铁元素，并且这些铁元
                    素的耐高温能力是远远超过地球上的，所以科学家们才想着要向
                    太空进行索取!</p>
                </div>
                <p class="tips">*本文版权及观点归原文著作作权人，不代表平台立场</p>
            </div>
        </section>
        <section class="weui-tab__bd-item infinite" id="hotSpot">
            <div class="news-list weui-panel__bd" id="">

            </div>
            <div class="weui-loadmore">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
        </section>
        <section class="weui-tab__bd-item infinite" id="discovery">
            <div class="weui-search-bar" id="searchBar">
                <form class="weui-search-bar__form">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索一带一路"
                               required="">
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                </form>
                <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
            </div>
            <div class="filter">
                <div class="filter-item">
                    <div class="mt">国家</div>
                    <div class="mc">
                        <ul class="filter-item-list" id="country">
                            <li class="item">俄罗斯</li>
                            <li class="item">新加坡</li>
                            <li class="item active">印度</li>
                            <li class="item">以色列</li>
                            <li class="item">法国</li>
                            <li class="item">德国</li>
                            <li class="item">英国</li>
                        </ul>
                    </div>
                </div>
                <div class="filter-item">
                    <div class="mt">领域</div>
                    <div class="mc">
                        <ul class="filter-item-list" id="domain">
                            <li class="item">政治</li>
                            <li class="item">经济</li>
                            <li class="item">社会</li>
                            <li class="item">能源</li>
                            <li class="item">农业</li>
                            <li class="item">科技</li>
                            <li class="item">知识产权</li>
                        </ul>
                    </div>
                </div>
                <div class="filter-item">
                    <div class="mt">语言</div>
                    <div class="mc">
                        <ul class="filter-item-list" id="language">
                            <li class="item">英语</li>
                            <li class="item">德语</li>
                            <li class="item">俄语</li>
                            <li class="item">波兰语</li>
                            <li class="item">阿拉伯语</li>
                            <li class="item">西班牙语</li>
                            <li class="item">葡萄牙语</li>
                        </ul>
                    </div>
                </div>
                <div class="filter-item">
                    <div class="mt">情感</div>
                    <div class="mc">
                        <ul class="filter-item-list" id="emotional">
                            <li class="item">积极</li>
                            <li class="item">中性</li>
                            <li class="item">消极</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="news-list weui-panel__bd" id="">

            </div>

        </section>

    </div>

    <div class="weui-tabbar">
        <a href="#details" class="weui-tabbar__item weui-bar__item--on">
            <!--<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>-->
            <div class="weui-tabbar__icon">
                <div class="icon"></div>
                <!--<img src="../static/imgs/i_index_on.png" alt="">-->
            </div>
            <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="#hotSpot" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <div class="icon"></div>
                <!--<img src="../static/imgs/i_hotSpot.png" alt="">-->
            </div>
            <p class="weui-tabbar__label">热点</p>
        </a>
        <a href="#discovery" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <div class="icon"></div>
                <!--<img src="../static/imgs/i_discovery.png" alt="">-->
            </div>
            <p class="weui-tabbar__label">发现</p>
        </a>
    </div>
</div>
<script src="../static/assets/js/echarts-4.2.0.js"></script>
<script src="../static/assets/js/echarts-gl.js"></script>
<script src="../static/assets/js/world.js"></script>
<script src="../static/assets/js/jquery-3.3.1.min.js"></script>
<script src="../static/js/common.js"></script>
<script src="../static/js/chartsCom.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<script src="../static/assets/js/jquery-weui-1.2.1.js"></script>
<script src="../static/js/fastclick.js"></script>
<script src="../static/js/hotSpot.js"></script>
<script>

    $(".infinite").infinite().on("infinite", function() {
        var self = this;
        if(self.loading) return;
        //console.log(self)
        self.loading = true;
        //console.log(self);
        setTimeout(function() {
            var str = `<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box_text">
                            <h4 class="weui-media-box__title">xin xin 保加利亚谈一带一路</h4>
                            <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                            <ul class="weui-media-box__info">
                                <li class="weui-media-box__info__meta">中国 · 北京</li>
                                <li class="weui-media-box__info__meta">法新社</li>
                                <li class="weui-media-box__info__meta weui-media-box__info__meta_time">一分钟前</li>
                            </ul>
                        </div>
                    </a>`
            $(self).find(".news-list").append(str);
            self.loading = false;
        }, 2000);   //模拟延迟
    });
</script>
</body>
</html>







